<route>
{
    name: 'dashboard',
    meta: {
        title: "首页"
    }
}
</route>

<template>
    <div>
        <!-- 头部数据开始 -->
        <el-row :gutter="10">
            <el-col :md="12" :lg="6">
                <page-main class="text-center" style="padding: 0;">
                    <div class="p-10">
                        <CountTo
                            class="text-purple fs-xxl"
                            :start-val="0"
                            :end-val="baseObj.CountArticles"
                            :duration="3000"
                        />
                        <em class="text-purple-1 ml-5">篇</em>
                    </div>
                    <div class="bg-black p-5">总文章数</div>
                </page-main>
            </el-col>
            <el-col :md="12" :lg="6">
                <page-main class="text-center" style="padding: 0;">
                    <div class="p-10">
                        <CountTo
                            class="text-blue fs-xxl"
                            :start-val="0"
                            :end-val="baseObj.DayArticles"
                            :duration="3000"
                        />
                        <em class="text-blue-1 ml-5">篇</em>
                    </div>
                    <div class="bg-black p-5">日新增文章数</div>
                </page-main>
            </el-col>
            <el-col :md="12" :lg="6">
                <page-main class="text-center" style="padding: 0;">
                    <div class="p-10">
                        <CountTo
                            class="text-blue-2 fs-xxl"
                            :start-val="0"
                            :end-val="baseObj.CountComments"
                            :duration="3000"
                        />
                        <em class="text-blue-3 ml-5">条</em>
                    </div>
                    <div class="bg-black p-5">评论总数</div>
                </page-main>
            </el-col>
            <el-col :md="12" :lg="6">
                <page-main class="text-center" style="padding: 0;">
                    <div class="p-10">
                        <CountTo
                            class="text-green fs-xxl"
                            :start-val="0"
                            :end-val="baseObj.DayComments"
                            :duration="3000"
                        />
                        <em class="text-green-1 ml-5">条</em>
                    </div>
                    <div class="bg-black p-5">日新增评论数</div>
                </page-main>
            </el-col>
        </el-row>
        <!-- 头部数据结束 -->

        <!-- 第二行开始 -->
        <el-row>
            <el-col :md="24" :lg="16">
                <page-main>
                    <MonthArticles :cdata="mouthArticles" />
                </page-main>
            </el-col>
            <el-col :md="24" :lg="8">
                <page-main>
                    <ClassifyArticles :cdata="classifyArticles" />
                </page-main>
            </el-col>
        </el-row>
        <!-- 第二行结束 -->

        <!-- 第三行开始 -->
        <el-row>
            <el-col :md="24" :lg="24">
                <page-main>
                    <ClassifyAccess :cdata="classifyAccess" />
                </page-main>
            </el-col>
        </el-row>
        <!-- 第三行结束 -->
    </div>
</template>

<script setup name="dashboard">
import CountTo from './components/CountTo/vue-countTo.vue'
import MonthArticles from '@/echart/components/MonthArticles/index.vue'
import ClassifyArticles from '@/echart/components/ClassifyArticles/index.vue'
import ClassifyAccess from '@/echart/components/ClassifyAccess/index.vue'
import { Base, addMouthArtices, addClassifyArticles, addClassifyAccess } from '@/api/home'

const baseObj = ref({}) // 文章、评论基础数据
const mouthArticles = reactive({
    xData: [],
    sData: []
}) // 月新增文章数
const classifyArticles = reactive({
    lData: [],
    sData: []
}) // 分类文章数量比
const classifyAccess = reactive({
    lData: [],
    xData: [],
    sData: []
}) // 分类访问量
let timing = null // 定时器

onMounted(() => {
    changeTiming()
})
onBeforeUnmount(() => {
    clearInterval(timing)
})

/**
 * @description: 定时刷新数据
 * @param {*}
 * @return {*}
 * @author: Yu
 */
const changeTiming = () => {
    getBaseData()
    getAddMouthArticesData()
    getClassifyArticlesData()
    getClassifyAccessData()
    timing = setInterval(() => {
        getBaseData()
        getAddMouthArticesData()
        getClassifyArticlesData()
        getClassifyAccessData()
    }, 1000 * 5)
}

/**
 * @description: 获取首页文章、评论基础数据
 * @param {*}
 * @return {*}
 * @author: Yu
 */
const getBaseData = async() => {
    const { data: res } = await Base()
    baseObj.value = res
}

/**
 * @description: 获取月新增文章数
 * @param {*}
 * @return {*}
 * @author: Yu
 */
const getAddMouthArticesData = async() => {
    const { data: res } = await addMouthArtices()
    mouthArticles.xData = res.time
    mouthArticles.sData = res.nums
}

/**
 * @description: 获取分类文章数量比
 * @param {*}
 * @return {*}
 * @author: Yu
 */
const getClassifyArticlesData = async() => {
    const { data: res } = await addClassifyArticles()
    classifyArticles.lData = res.lData
    classifyArticles.sData = res.sData
}

/**
 * @description: 获取分类访问量
 * @param {*}
 * @return {*}
 * @author: Yu
 */
const getClassifyAccessData = async() => {
    const { data: res } = await addClassifyAccess()
    classifyAccess.lData = res.lData
    classifyAccess.xData = res.xData
    classifyAccess.sData = res.sData
}
</script>
